<script setup>
import UserService from "../services/user.service.js";
import {ref} from "vue";
import httpClient from "../services/http.client.js";
import {useAuth} from "../services/auth.service.js";
import {useRouter} from "vue-router";

const router = useRouter()

let preloader = ref(false)
let data = ref({})

const getUserData = () => {
  preloader.value = true
  data.value = {}
  UserService.getUserData().then(response => {
    console.log(response.data)
    data.value = response.data
    preloader.value = false
  })
}

const signout = () => {
  const {logout} = useAuth()
  logout().then(_ => {
    router.push({ name: "Login" })
  })
}
</script>

<template>
<div>
  <h4>Dashboard View</h4>

  <div style="display: flex; gap: 10px;">
    <div>
      <img v-if="data.avatar" :src="httpClient.getUri() + data.avatar" alt="" style="width: 100px; height: 100px; border-radius: 10px;">
    </div>
    <div>
      <div>Username: {{data.username}}</div>
      <div>E-mail: {{data.email}}</div>
    </div>
  </div>

  <div style="margin-top: 20px; display: flex; gap: 5px;">
    <button @click="getUserData">Получить данные пользователя</button>
    <button @click="signout">Выход</button>
  </div>

  <div v-if="preloader" style="width: 50px; height: 50px; border-radius: 50%; background-color: red; position: fixed; top: 10px; right: 10px;"></div>
</div>
</template>

<style scoped>

</style>